<template>
  <div id="loop" style=" margin: 0 auto">
    <div id="prev" class="step" @click="step(-1)">
      <i class="el-icon-arrow-left"></i>
    </div>
    <div id="img">
      <transition-group>
        <template v-for="(i,index) in list">
          <img v-show="index===select" :key="index"
               :src="'http://localhost:8001/file/getResource?id='+i.id">
        </template>
      </transition-group>
    </div>

    <div id="next" class="step" @click="step(1)">
      <i class="el-icon-arrow-right"></i>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "loop",
  components: {},
  computed: {
    ...mapState(['contentList'])
  },
  data() {
    return {
      interval: null,
      list: [],
      select: 0
    }
  },
  mounted() {
    this.contentList.forEach(item => item.fileList.forEach(img => this.list.push(img)))
    this.start()
  },
  methods: {
    getIndex(index) {
      if (index < 0) {
        index = this.list.length - 1
      }
      return index % this.list.length
    },
    start() {
      this.step(0)
      if (this.list.length > 1) {
        this.interval = setInterval(() => {
          this.step(1)
        }, 4000)
      }
    },
    step(step) {
      this.select = this.getIndex(this.select + step)
    },
    clear() {
      clearInterval(this.interval)
    }
  },
  beforeDestroy() {
    this.clear()
  }
}
</script>
<style scoped>
#loop {
  display: flex;
  justify-content: space-between;
}

#img img {
  position: absolute;
  border-radius: 15px;
  max-width: 92%;
  max-height: 92%;
  z-index: 999;
  left: 0;
  right: 0;
  top: 5%;
  margin: 30px auto;
}

.step {
  width: 90px;
  height: 600px;
  background: #a7a5a5;
  opacity: .3;
  border-radius: 10px;
  font-size: 70px;
  position: fixed;
  top: 30%;
  z-index: 1000;
}

#prev {
  left: 5%;
}

#next {
  right: 5%;
}

.step i {
  margin-top: 265px;
}

.step:hover {
  opacity: .4;
  color: black;
}

.v-enter-active {
  animation: fade 2s ease;
}

.v-leave-active {
  animation: fade 2s ease reverse;
}

@keyframes fade {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
</style>